﻿@{
    Layout = "~/Views/Shared/_LayoutUser.cshtml";
    ViewBag.Title = "网非e学院--登录";
}

<div class="weui_tab">
    <div class="weui_navbar">
        <div class="weui_navbar_item weui_bar_item_on" id="navAccount">
            普通登录
        </div>
        <div class="weui_navbar_item" id="navPhone">
            验证码登录
        </div>
    </div>
    <div class="weui_tab_bd">
    </div>
</div>

<form method="post" id="formAccount">
    <div class="weui_cell">
    </div>
    <div class="weui_cell">
        <div class="weui_cell_hd"><label class="weui_label">手机号</label></div>
        <div class="weui_cell_bd weui_cell_primary">
            <input class="weui_input" type="text" placeholder="手机号" value="@ViewBag.UserName" id="userName" name="UserName">
        </div>
    </div>
    <div class="weui_cell">
        <div class="weui_cell_hd"><label class="weui_label">密码</label></div>
        <div class="weui_cell_bd weui_cell_primary">
            <input class="weui_input" type="password" placeholder="密码" id="pwd" name="Pwd">
        </div>
    </div>
    <div class="weui_cell">
    </div>
    <div>
        <div id="ErrorAccount" class="error">
            @ViewBag.ErrorAccount
        </div>
        <span class="customBtn" onclick="LoginByAccount()">登录</span>
        <input type="hidden" name="LoginType" value="Account" />
    </div>
</form>
<form method="post" id="formPhone" style="display:none">
    <div class="weui_cell">
    </div>
    <div class="weui_cell">
        <div class="weui_cell_hd"><label class="weui_label">手机号</label></div>
        <div class="weui_cell_bd weui_cell_primary">
            <input class="weui_input" type="text" pattern="[0-9]*" placeholder="手机号" value="@ViewBag.Phone" id="phone" name="Phone">
        </div>
    </div>
    <div class="weui_cell">
        <div class="weui_cell_hd"><label class="weui_label">短信验证码</label></div>
        <div class="weui_cell_bd weui_cell_primary">
            <input class="weui_input" type="text" placeholder="验证码" id="mobileCode" name="MobileCode">
            <span class="weui_btn weui_btn_plain_primary btnSend" onclick="SendCode()" id="btnSend">发送</span>
        </div>
    </div>
    <div class="weui_cell">
    </div>
    <div>
        <div id="ErrorPhone" class="error">
            @ViewBag.ErrorPhone
        </div>
        <span class="customBtn" onclick="LoginByPhone()">去登录</span>
        <input type="hidden" name="LoginType" value="Phone" />
    </div>
</form>

<div style="text-align:center;">
    <br />
    <a href="Register?ID=10001"><b>新用户注册&nbsp;</b></a>
</div>

<script src="~/Scripts/PhoneStyle.js"></script>
<script>
    //默认页面
    var page = "@ViewBag.Page";
    if (page == "Phone") {
        ShowPhone();
    }
    else {
        ShowAccount();
    }

    //选项卡点击事件
    $("#navAccount").click(function () {
        ShowAccount();
    })
    $("#navPhone").click(function () {
        ShowPhone()
    })

    //显示普通登录页
    function ShowAccount() {
        $("#navPhone").removeClass("weui_bar_item_on");
        $("#navAccount").addClass("weui_bar_item_on");
        $("#formPhone").hide();
        $("#formAccount").show();
    }
    //显示验证码登录页
    function ShowPhone() {
        $("#navAccount").removeClass("weui_bar_item_on");
        $("#navPhone").addClass("weui_bar_item_on");
        $("#formAccount").hide();
        $("#formPhone").show();
    }

    var curCount = 0;
    //发送短信验证码
    function SendCode(phone) {
        var phone = $("#phone").val().replace(/\s/g, "");
        if (phone.length != 11) {
            $("#ErrorPhone").html("请输入正确的手机号！");
            return -1;
        }
        else {
            $("#ErrorPhone").html("");
        }
        $.ajax({
            type: "POST", //提交方式
            url: "SendValiCode",//获取数据的函数
            data: "Phone=" + phone, //参数
            error: function () { $("#ErrorPhone").html("发送失败，请重试！"); },
            success: function (data) {
                if (data == "1") {
                    curCount = 100;
                    $("#btnSend").removeAttr("onclick");
                    $("#btnSend").removeClass("weui_btn_plain_primary");
                    $("#btnSend").addClass("weui_btn_plain_default");
                    InterValObj = window.setInterval(SetRemainTime, 1000); //启动计时器，1秒执行一次
                }
            }
        });
    }

    //倒计时
    function SetRemainTime() {
        if (curCount <= 0) {
            window.clearInterval(InterValObj);//停止计时器
            $("#btnSend").attr("onclick", "SendCode()");
            $("#btnSend").html("发送");
            $("#btnSend").removeClass("weui_btn_plain_default ");
            $("#btnSend").addClass("weui_btn_plain_primary");
        }
        else {
            curCount--;
            $("#btnSend").html(curCount);
        }
    }

    //手机号文本框变更时执行
    $("#phone").keyup(function () {
        PhoneStyle("#phone");
        ValidatePhoneNum("#phone", "#ErrorPhone");
    })

    //手机号文本框变更时执行
    $("#userName").keyup(function () {
        PhoneStyle("#userName");
        ValidatePhoneNum("#userName", "#ErrorAccount");
    })

    //验证手机号是否数字
    function ValidatePhoneNum(control, controlWarm) {
        $(controlWarm).html("");
        var num = $(control).val().replace(/\s/g, "");
        if (isNaN(num)) {
            $(controlWarm).html("手机号输入错误！");
            return -1;
        }
        return 0;
    }

    //普通登录
    function LoginByAccount() {
        var uName = $("#userName").val().replace(/\s/g, "");
        var pwd = $("#pwd").val().replace(/\s/g, "");

        if (uName.length != 11) {
            $("#ErrorAccount").html("请输入正确的手机号！");
            return;
        }
        else {
            $("#ErrorAccount").html("");
        }

        var res = ValidatePhoneNum("#userName", "#ErrorAccount");
        if (res < 0)
        {
            return;
        }

        if (pwd.length > 20 || pwd.length < 6) {
            $("#ErrorAccount").html("请输入6-20位密码！");
            return;
        }
        else {
            $("#ErrorAccount").html("");
        }

        $("#pwd").val($.md5($("#pwd").val()));
        $("#formAccount").submit();
    }

    //验证码登录
    function LoginByPhone() {
        var phone = $("#phone").val().replace(/\s/g, "");
        if (phone.length != 11) {
            $("#ErrorPhone").html("请输入正确的手机号！");
            return;
        }
        else {
            $("#ErrorPhone").html("");
        }

        var res = ValidatePhoneNum("#phone", "#ErrorPhone");
        if (res < 0) {
            return;
        }

        if ($("#mobileCode").val() == "")
        {
            $("#ErrorPhone").html("请输入验证码！");
            return;
        }

        $("#formPhone").submit();
    }

    //手机号文本框 文字同步
    $("#phone").blur(function () {
        $("#userName").val($("#phone").val());
    })
    $("#userName").blur(function () {
        $("#phone").val($("#userName").val());
    })
</script>